<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
  <meta charset="UTF-8"/>

  <title th:text="#{cas.login.pagetitle}">CAS Acceptable Use Policy View</title>

  <link rel="stylesheet" th:href="@{/themes/anumbrella/font-awesome-4.7.0/css/font-awesome.min.css}">
  <link rel="stylesheet" th:href="@{${#themes.code('anumbrella.login.css.file')}}"/>
  <link rel="shortcut icon" href="../resources/favicon.ico" th:href="@{/static/favicon.ico}"/>

</head>

<body>
<div style="position: absolute;top: 50px;text-align:center ;width: 100%">
  <h1>统一身份认证服务</h1>
</div>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
  <path fill="#0099ff" fill-opacity="1"
        d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
  </path>
</svg>

<div class="container">
  <div class="box login">
    <div class="form-content">
      <div class="avtar">
        <div class="pic">
          <img th:src="@{${#themes.code('anumbrella.login.images.path')}+'/hdxyLogo.gif'}" alt="">
        </div>
      </div>
      <h1>登录操作</h1>
      <form class="form" method="post" th:object="${credential}">
        <div th:if="${#fields.hasErrors('*')}" class="red">
          <span th:each="err : ${#fields.errors('*')}" th:utext="${err}"/>
        </div>
        <div>
          <i class="fa fa-user-o"></i>
          <input type="text"
                 class="required"
                 placeholder="用户名"
                 id="username"
                 th:disabled="${guaEnabled}"
                 th:field="*{username}"
                 th:accesskey="#{screen.welcome.label.netid.accesskey}"
                 autocomplete="off">
        </div>
        <div>
          <i class="fa fa-key"></i>
          <input type="password"
                 id="password"
                 class="required"
                 placeholder="密码"
                 th:accesskey="#{screen.welcome.label.password.accesskey}"
                 th:field="*{password}"
                 autocomplete="off">
        </div>

        <!-- 验证码信息 -->
        <div>
          <i class="fa fa-bug"></i>
          <input type="text"
                 id="code"
                 th:field="*{capcha}"
                 placeholder="验证码"
                 autocomplete="off"/>
        </div>
        <img id="captcha_img" th:src="@{/captcha}" onclick="changeCode()" style="border-radius: 10px;"/>
        <span id="code_str"></span>
        <section class="btn">
          <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
          <input type="hidden" name="_eventId" value="submit"/>
          <input type="hidden" name="geolocation"/>
          <input class="pointer"
                 name="submit"
                 accesskey="l"
                 th:value="#{screen.welcome.button.login}"
                 tabindex="6"
                 type="submit"/>
        </section>

      </form>
      <p class="btn-something">
        没有用户 ? <span class="signupbtn pointer" id="signupbtn">去注册</span>
      </p>
    </div>
  </div>
  <div class="box signup">
    <div class="form-content">
      <div class="avtar">
        <div class="pic"><img th:src="@{${#themes.code('anumbrella.login.images.path')}+'/hdxyLogo.gif'}" alt=""></div>
      </div>
      <h1>注册操作</h1>
      <div class="form">
        <div class="red">
          <span id="warnMsg"></span>
        </div>
        <div>
          <i class="fa fa-address-card-o"></i>
          <input type="text" placeholder="姓名" autocomplete="off" id="nickName">
        </div>
        <div>
          <i class="fa fa-user-o"></i>
          <input type="text" placeholder="账户号码" autocomplete="off" id="registerUsername">
        </div>
        <div>
          <i class="fa fa-key"></i>
          <input type="password" placeholder="密码" id="registerPassword1">
        </div>
        <div>
          <i class="fa fa-key"></i>
          <input type="password" placeholder="确认密码" id="registerPassword2">
        </div>
        <div class="btn">
          <button onclick="registerBtn()">注册</button>
        </div>
      </div>
      <p class="btn-something">
        已有用户 ? <span class="loginbtn">去登陆</span>
      </p>
    </div>
  </div>
</div>
<script th:src="@{${#themes.code('anumbrella.javascript.code.file')}}"></script>
<script th:src="@{${#themes.code('anumbrella.javascript.jquery.file')}}"></script>

<script>

  //注册登录的动画样式
  let login = document.querySelector(".login");
  let signup = document.querySelector(".signup");

  let loginbtn = document.querySelector(".loginbtn");
  let siginupbtn = document.querySelector("#signupbtn");

  siginupbtn.addEventListener("click", () => {
    login.style.transform = "rotateY(180deg)";
    signup.style.transform = "rotateY(0deg)";
  })

  loginbtn.addEventListener("click", () => {
    login.style.transform = "rotateY(0deg)";
    signup.style.transform = "rotateY(-180deg)";
  })

  //清空注册表单
  function clearRegisterForm() {
    document.getElementById('registerUsername').value = '';
    document.getElementById('registerPassword1').value = '';
    document.getElementById('registerPassword2').value = '';
  }

  //点击注册
  function registerBtn() {
    let warnMsg = document.getElementById('warnMsg');
    let registerUsername = document.getElementById('registerUsername').value;
    let registerPassword1 = document.getElementById('registerPassword1').value;
    let registerPassword2 = document.getElementById('registerPassword2').value;
    let nickName = document.getElementById('nickName').value;
    if (registerUsername == '' || registerPassword1 == '' || registerPassword2 == '' || nickName == '') {
      warnMsg.innerHTML = '表单必须填写完整';
    } else {
      if (registerPassword1 == registerPassword2) {
        $.post('/cas/registerUser', JSON.stringify({
          registerUsername: registerUsername,
          registerPassword: registerPassword1,
          nickName: nickName
        }), function (res) {
          warnMsg.innerHTML = res.msg;

        }, 'json')
      }
    }
  }
</script>
</body>

</html>
